html, body, page {
	height: 100%;
	overflow: hidden;
}

@font-face {
	font-family: 'Aboreto';
	src: url('/static/font/Aboreto-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Abhaya Libre Medium';
	src: url('/static/font/AbhayaLibre-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Abhaya Libre ExtraBold';
	src: url('/static/font/AbhayaLibre-ExtraBold.ttf') format('truetype');
}

.layout {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	font-family: "Abhaya Libre Medium"!important
}

.v-loading {
	position: relative;
	
	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: inline-block;
		content: '';
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.7);
	}
	
	&::after {
		position: absolute;
		top: calc(50% - 12upx);
		left: calc(50% - 20upx);
		z-index: 2;
		display: inline-block;
		content: '';
		width: 20upx;
		height: 20upx;
		border-radius: 50%;
		border: 4upx solid #aaa; /* Set border color */
		border-top-color: transparent; /* Color for the animated part */
		animation: spin 1s linear infinite; /* Animation */
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}